<template>
  <page-container>
    <pagination-table
      auto-load
      class="tree-table"
      size="mini"
      :paged="false"
      :row-config="{ keyField: 'moduleId' }"
      :column-config="{ resizable: false }"
      :show-tools="false"
      :tree-config="treeConfig"
      :load="loadTree"
      @cell-click="handleClick"
    >
      <tree-column
        field="moduleName"
        row-field="moduleId"
        :class-name="treeColumnClass"
      >
        展开
        <template #row="{ row }">
          {{ row.moduleName }}
        </template>
      </tree-column>
    </pagination-table>
  </page-container>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';

  import { getPremissionModule, getPremissionList } from '@/api/premission';

  const showData = ref<any[]>([]);

  const treeConfig = {
    expandAll: true,
    transform: true,
    rowField: 'moduleId',
    parentField: 'parentId'
  };

  const actived = ref();

  const treeColumnClass = ({ row }: any) => {
    return row.moduleId == actived.value ? 'tree-cell-actived' : 'tree-cell';
  };

  const loadTree: loadPaginationRequest = async () => {
    const res = await getPremissionModule();
    actived.value = res[0]?.moduleId;
    return { dataList: res };
  };

  const handleClick = ({ row }: any) => {
    if (actived.value == row.moduleId) return;
    actived.value = row.moduleId;
  };

  onMounted(() => {
    getPremissionList().then((res) => {
      showData.value = res;
    });
  });
</script>

<style lang="less">
  @keyframes cell-actived {
    from {
      width: 0;
    }
    to {
      width: 100%;
    }
  }
  .tree-cell-actived {
    color: var(--primary-color);
    cursor: pointer;
    position: relative;
    &::after {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      background-color: var(--primary-color-suppl);
      opacity: var(--opacity5);
      z-index: 1;
      animation: cell-actived ease-in-out 200ms forwards;
    }
    div {
      z-index: 2;
    }
  }
  .tree-cell {
    cursor: pointer;
  }
</style>

<style lang="less" scoped>
  .page {
    margin-top: 20px;
    height: calc(100% - 20px);
    display: flex;
    flex-direction: column;
    background-color: #fff;
    .header {
      height: 10px;
      // padding: 16px;
      font-size: 16px;
      font-family:
        PingFangSC-Medium,
        PingFang SC;
      font-weight: 500;
      color: #323233;
    }

    .form-inline {
      padding: 0 16px;
    }

    .flex-box {
      display: flex;
      flex: 1;
      overflow: hidden;
      min-height: calc(100vh - 170px);
      .tree-nav {
        flex: 0 0 240px;
        padding: 16px;
        margin: 0 10px 10px;
        overflow: auto;
        background-color: var(--modal-color);
        box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        .pagination-table {
          height: 100%;
        }
      }
      .right {
        margin: 0 15px;
        flex: 1 1 auto;
        width: 100%;
        overflow: scroll;
      }
    }

    .tree-expand-header {
      display: flex;
      align-items: center;
      flex-direction: row;
    }
    .tool-link {
      margin-left: 6px;
    }
  }
</style>
